<template>
  <div class="business-container">
    <!-- 表单 -->
    <div class="search-card-box" style="margin-bottom:20px">
      <el-card>
        <el-form ref="form" label-width="90px" label-position="right" :model="listData">
          <el-row :gutter="20">
            <!-- 订单编号 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="订单编号:">
                <el-input v-model="listData.id" placeholder="请输入订单编号" />
              </el-form-item>
            </el-col>
            <!-- 订单状态 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="订单状态:">
                <el-select v-model="listData.status" placeholder="请选择" style="width: 100%;">
                  <el-option label="待取件" value="23000" />
                  <el-option label="已取件" value="23001" />
                  <el-option label="网点自寄" value="23002" />
                  <el-option label="网点入库" value="23003" />
                  <el-option label="待装车" value="23004" />
                  <el-option label="运输中" value="23005" />
                  <el-option label="网点出库" value="23006" />
                  <el-option label="待派送" value="23007" />
                  <el-option label="派送中" value="23008" />
                  <el-option label="已签收" value="23009" />
                  <el-option label="拒收" value="23010" />
                  <el-option label="已取消" value="23011" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 付费状态 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="付费状态:">
                <el-select v-model="listData.paymentStatus" placeholder="请选择" style="width: 100%;">
                  <el-option label="已付" value="2" />
                  <el-option label="未付" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 发件人姓名 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="发件人姓名:">
                <el-input v-model="listData.senderName" placeholder="请输入发件人姓名" />
              </el-form-item>
            </el-col>
            <!-- 发件人电话 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="发件人电话:">
                <el-input v-model="listData.senderPhone" placeholder="请输入发件人电话" />
              </el-form-item>
            </el-col>
            <!-- 发件人地址 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="发件人地址:" type="flex">
                <el-select v-model="listData.senderProvinceId" placeholder="请选择省" style="width: 33.33333%;" @change="changepFn">
                  <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select v-model="listData.senderCityId" placeholder="请选择市" style="width: 33.33333%; margin: 0 10px;" @change="changecFn">
                  <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select v-model="listData.senderCountyId" placeholder="请选择县" style="width: 33.33333%;">
                  <el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 收件人姓名 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="收件人姓名:">
                <el-input v-model="listData.receiverName" placeholder="请输入收件人姓名" />
              </el-form-item>
            </el-col>
            <!-- 收件人电话 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="收件人电话:">
                <el-input v-model="listData.receiverPhone" placeholder="请输入收件人电话" />
              </el-form-item>
            </el-col>
            <!-- 收件人地址 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-form-item label="收件人地址:">
                <el-select v-model="listData.receiverProvinceId" placeholder="请选择省" style="width: 33.33333%;">
                  <el-option v-for="item in receiverprovinceList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select v-model="listData.receiverCityId" placeholder="请选择市" style="width: 33.33333%;  margin: 0 10px;">
                  <el-option v-for="item in receivercityList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select v-model="listData.receiverCountyId" placeholder="请选择县" style="width: 33.33333%;">
                  <el-option v-for="item in receivercountryList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 按钮 -->
            <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
              <el-button type="primary" @click="searchFn">搜索</el-button>
              <el-button @click="resetFn">重置</el-button></el-col>
          </el-row>
          <el-form-item />
        </el-form>
      </el-card>
    </div>
    <!-- 表格 -->
    <div class="table-card-box">
      <el-card>
        <el-table
          v-loading="isLoading"
          stripe
          :data="tableData"
          style="width: 100%"
        >
          <template v-slot:empty>
            <div style="text-align: center; padding: 20px;">
              <!-- 空状态 -->
              <el-empty description="这里空空如也" />
            </div>
          </template>
          <el-table-column
            type="index"
            label="序号"
            width="60"
          />
          <el-table-column
            prop="id"
            label="订单编号"
            width="170"
          />
          <el-table-column
            prop="transportOrder.id"
            label="运单编号"
            width="140"
          />
          <el-table-column
            prop="createTime"
            label="下单时间"
            width="160"
          />
          <!-- 订单状态 -->
          <el-table-column
            prop="status"
            label="订单状态"
            width="90"
          >
            <template v-slot="{row}">
              <span v-if="row.status===22000">已关闭</span>
              <span v-else-if="row.status===23000">待取件</span>
              <span v-else-if="row.status===23001">已取件</span>
              <span v-else-if="row.status===23002">网点自寄</span>
              <span v-else-if="row.status===23003">网点入库</span>
              <span v-else-if="row.status===23004">待装车</span>
              <span v-else-if="row.status===23005">运输中</span>
              <span v-else-if="row.status===23006">网点出库</span>
              <span v-else-if="row.status===23007">待派送</span>
              <span v-else-if="row.status===23008">派送中</span>
              <span v-else-if="row.status===23009">已签收</span>
              <span v-else-if="row.status===23010">拒收</span>
              <span v-else-if="row.status===23011">已取消</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <!-- 发件人姓名 -->
          <el-table-column
            prop="senderName"
            label="发件人姓名"
            width="100"
          />
          <el-table-column
            prop="senderPhone"
            label="发件人电话"
            width="120"
          />
          <el-table-column
            prop="senderAddress,senderProvince,senderCity,senderCounty"
            label="发件人地址"
            width="150"
          >
            <template v-slot="{row}">
              <span>{{ row.senderProvince.name+row.senderCity.name+row.senderCounty.name+row.senderAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="receiverName"
            label="收件人姓名"
            width="100"
          />
          <el-table-column
            prop="receiverPhone"
            label="收件人电话"
            width="120"
          />
          <el-table-column
            prop="receiverAddress"
            label="收件人地址"
            width="120"
          >
            <template v-slot="{row}">
              <span>{{ row.receiverProvince.name+row.receiverCity.name+row.receiverCounty.name+row.receiverAddress }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="pickupType"
            label="取件类型"
            width="100"
          >
            <template v-slot="{row}">
              <span v-if="row.pickupType===1">网点自寄</span>
              <span v-else-if="row.pickupType===0">上门取件</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentMethod"
            label="付费类型"
            width="100"
          >
            <template v-slot="{row}">
              <span v-if="row.paymentMethod===1">预结</span>
              <span v-else-if="row.paymentMethod===2">到付</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentStatus"
            label="付费状态"
            width="100"
          >
            <template v-slot="{row}">
              <span v-if="row.paymentStatus===1">未付</span>
              <span v-else-if="row.paymentStatus===2">已付</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="85"
          >
            <template v-slot="{row}">
              <el-button style="text-align: center; color:#419eff" type="text" size="small" @click="$router.push(`/business/detail/${row.id}`)">查看详情</el-button>
              <!-- <el-button style="text-align: center; color:#419eff" type="text" size="small" @click="sendFn(row)">查看详情</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center" style="margin-top: 20px;">
          <el-pagination
            :current-page="listData.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="listData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listData.counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getBusiListApi } from '@/api/business'
import { getCityList } from '@/api/base'
export default {
  data() {
    return {
      isLoading: true,
      tableData: [],
      listData: {
        counts: 0, // 总条数
        page: 1, // 当前页
        pageSize: 10, // 每页有几条数据
        id: '',
        paymentMethod: '', // 付费类型
        paymentStatus: '', // 付费状态
        pickupType: '',
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverProvinceId: '', // 收件人省
        receiverCityId: '', // 收件人市
        receiverCountyId: '', // 收件人区
        senderName: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        senderPhone: '',
        status: ''
      },
      provinceList: [],
      cityList: [],
      countryList: [],
      receiverprovinceList: [],
      receivercityList: [],
      receivercountryList: []
    }
  },
  created() {
    this.getBusiList()
    this.getCity()
  },
  methods: {
    // sendFn(row) {
    //   console.log(row.pickupType)
    //   console.log(row.senderProvince.name)
    //   console.log(row)
    // },
    async getBusiList() {
      // 实现订单管理请求
      const res = await getBusiListApi(this.listData)
      console.log(res)
      this.tableData = res.items
      this.listData.counts = Number(res.counts)
      this.isLoading = false
    },
    // 每页有几条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listData.pageSize = val
      this.getBusiList()
    },
    // 当前是第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listData.page = val
      this.getBusiList()
    },
    // 获取省地区列表
    async getCity() {
      // 实现省列表请求
      const res = await getCityList()
      // console.log(res)
      this.provinceList = res
      this.receiverprovinceList = res
    },
    // 获取城市地区列表
    async  changepFn(id) {
      // console.log(id)
      const res = await getCityList(
        { parentId: id }
      )
      console.log(res)
      this.cityList = res
      this.receivercityList = res
    },
    // 获取区域地区列表
    async  changecFn(id) {
      console.log(id)
      const res = await getCityList(
        { parentId: id }
      )
      console.log(res)
      this.countryList = res // 发件方
      this.receivercountryList = res // 收件方
    },
    // 搜索功能
    searchFn() {
      this.getBusiList()
    },
    // 重置表单
    resetFn() {
      this.$refs.form.$el.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
.business-container{
    padding: 20px;
    // background-color: #f3f4f7;
    padding-top: 23px;
  .search-card-box{
    ::v-deep .el-card__body {
      padding-left: 0;
      padding-bottom: 0;
      .el-row {
       margin: 0!important;
       .el-form-item {
       margin-bottom: 20px;
      }
      .el-form-item__label {
        color: #20232a;
        font-weight: 400;
        text-align: right;
        padding-left: 10px;
        box-sizing: border-box;
         white-space: nowrap;
      }
     .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
      }
      .el-button {
        width: 90px;
        padding: 10px 20px!important;
        border-radius: 5px!important;
        font-weight: 400;
      }
      .el-button--primary {
        height: 40px;
      }
      .el-button--default {
         width: 90px;
         margin-left: 18px;
         border-radius: 5px;
       }
     }
     .el-form-item__content{
      display: flex;
     }
    }
  }
  .table-card-box{
    .el-table{
      border: 1px solid #ebeef5;
      font-size: 14px;
    }
    ::v-deep .el-table th.el-table__cell{
      background-color: #f8faff;
    }
  }
}
</style>
